<template>
  <transition>
    <div v-if="visible" class="detail-main">
      <el-page-header @back="handleClose" :icon="null" class="detail-header">
        <template #title>
          <div class="detail-header-title">
            {{props.id ? '编辑' : '新增'}}
          </div>
        </template>
        <template #content>
          数字字典信息
        </template>
        <template #extra>
          <div style="flex: auto">
            <el-button type="primary" @click="handleOk(formRef)" :loading="state.subLoading" :icon="Select">
              保存
            </el-button>
            <el-button @click="handleClose" :icon="Back">返回列表</el-button>
          </div>
        </template>
      </el-page-header>
      <div class="detail-form">
        <el-form ref="formRef" :model="formState" :rules="rules" v-loading="state.subLoading" label-width="auto">
          <el-row :gutter="20">
            <el-col :span="20" :offset="1">
              <el-form-item prop="code" label="类型编码">
                <el-input id="code" v-model="formState.code" placeholder="请输入类型编码" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20" :offset="1">
              <el-form-item prop="name" label="类型名称">
                <el-input id="name" v-model="formState.name" placeholder="请输入类型名称"  clearable/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </transition>
</template>

<script setup name="DictDetail">
import {DictApi} from '@/api/system/dict';
import useCurrentInstance from '@/hooks/useCurrentInstance';
import {detailState, rules, state} from "../index";
import {setSubLoading} from '../index'
import {Back, Select} from "@element-plus/icons-vue";

const {proxy} = useCurrentInstance();
const emits = defineEmits(["refreshData"]);
let formState = toRef(detailState);
const formRef = ref();
const visible = ref(false);
const props = defineProps({
  id: {
    type: String,
    required: false,
  },
  drawer: {
    type: Boolean,
    required: true,
  }
});
function handleOk(formEl) {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      setSubLoading(true);
      if (formState.value.id) {
        DictApi.update(formState.value).then(res => {
          if (res.success) {
            proxy.$message.success(res.message);
            handleClose();
          } else {
            proxy.$message.error(res.message);
          }
        });
      } else {
        DictApi.save(formState.value).then(res => {
          if (res.success) {
            proxy.$message.success(res.message);
            handleClose();
          } else {
            proxy.$message.error(res.message);
          }
        });
      }
      setSubLoading(true);
    } else {
      console.log('error submit!', fields)
    }
  })
}

//关闭弹窗
function handleClose() {
  formRef.value?.resetFields()
  emits('refreshData');
  resetData();
}

//初始化数据
function initInfo(id) {
  setSubLoading(true);
  DictApi.findById({id}).then((res) => {
    if (res.success) {
      formState.value = res.data;
    }
  }).catch((e) => {
    console.log(e);
  }).finally(() => {
    setSubLoading(false);
  });

}

//重置数据
function resetData() {
  formState.value = detailState;
}
//监听props.visible 值得变化
watch(() => props.drawer, v => {
  visible.value = v;
})
defineExpose({
  initInfo,
})

</script>

<style scoped></style>
